<div class="yui-g">
    <table id="editgrid"></table>
    <div id="pager"></div>
    <br /> <a href="javascript:void(0)" id="s1">Set new url</a>     
</div>
<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery("#editgrid").jqGrid({
            url:'<?=base_url();?>index.php/admin/usuarios/post',
            datatype: 'json',
            mtype: 'POST',
            colNames:['id','Nombre','Nombre de usario','Email','Telefono','Direccion','Ciudad','Proincia','Clave','Tipo','Envio','Permisos','Tarjeta'],
            colModel :[
                {name:'id', index:'id', width:90,editable:false,editoptions:{size:10}},
                {name:'name', index:'name', width:120,editable:true,editoptions:{size:20}},
                {name:'username', index:'username', width:120,editable:true,editoptions:{size:20}, align:'right'},
                {name:'email', index:'email', width:80,editable:true,editoptions:{size:20}, align:'right'},
                {name:'phone_1', index:'phone_1', width:80,editable:true,editoptions:{size:20}, align:'right'},
                {name:'address_1', index:'address_1', width:80,editable:true,editoptions:{size:20}, align:'right'},
                {name:'city', index:'city', width:80,editable:true,editoptions:{size:20}, align:'right'},
                {name:'state', index:'state', width:80,editable:true,editoptions:{size:20}, align:'right'},
                {name:'password', index:'password', width:80,editable:true,editoptions:{size:20}, align:'right',edittype:'password'},
                {name:'usertype', index:'usertype', width:90,editable:true,edittype:"select",editoptions:{value:"bajo:bajo;medio:medio;alto:alto;"}},
                {name:'extra_field_2', index:'extra_field_2', width:80,editable:true,editoptions:{size:20}, align:'right'},
                {name:'perms',index:'perms', width:90,editable:true,edittype:"select",editoptions:{value:"comun:comun;editor:editor;admin:admin;"}},
                {name:'tarjeta', index:'perms', width:80,editable:false,editoptions:{size:20}, align:'right'},
            ],
            pager: '#pager',
            rowNum:100,
            rowList:[10,20,30,40,50,100],
            sortname: 'name',
            sortorder: 'desc',
            viewrecords: true,
            caption: 'Usuarios',
            height:'100%',
            width:'100%',
            editurl:"<?=base_url();?>index.php/admin/usuarios/guardar_1",


            //Sub Tabla
            subGrid: true, caption: "Sub-Categorias", subGridRowExpanded: function(subgrid_id, row_id) {
                var subgrid_table_id,
                pager_id;
                subgrid_table_id = subgrid_id+"_t";
                pager_id = "p_"+subgrid_table_id;
                var lastsel3;
                $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");
                jQuery("#"+subgrid_table_id).jqGrid({
                    //url:"subgrid.php?q=2&id="+row_id,
                    url:'<?=base_url();?>index.php/admin/usuarios/post2/'+row_id,
                    datatype: "json",
                    mtype: 'POST',
                    colNames:['Id','Nombre','Texto Menu','Empresa','Activo','Modificar','Eliminar'],
                    colModel :[
                        {name:'id', index:'id', width:20,editable:false,editoptions:{size:10}},
                        {name:'nombre', index:'nombre', width:300,editable:true,editoptions:{size:10}},
                        {name:'texto_menu', index:'texto_menu', width:150,editable:true,editoptions:{size:10}},
                        {name:'empresa', index:'empresa', width:150,editable:true,editoptions:{size:10}},
                        {name:'estado',index:'estado', width:60, editable: true,edittype:"checkbox",editoptions: {value:"si:no"}},
                        {name:'modificar',index:'modificar', width:60, editable: true,edittype:"checkbox",editoptions: {value:"si:no"}},
                        {name:'eliminar',index:'eliminar', width:60, editable: true,edittype:"checkbox",editoptions: {value:"si:no"}},
                    ],
                    rowNum:100,
                    rowList:[100,200,300],
                    pager: pager_id,
                    sortname: 'nombre',
                    sortorder: "asc",
                    height: '100%',
                    
                    onSelectRow: function(id){
                        jQuery("#"+subgrid_table_id).jqGrid('restoreRow',lastsel3);
                        jQuery("#"+subgrid_table_id).jqGrid('editRow',id,true);
                        lastsel3=id;
                    },
                    editurl:"<?=base_url();?>index.php/admin/usuarios/guardar_2/"+row_id
                });
                jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:false,del:false}),
                jQuery("#s1").click( function() { jQuery("#"+subgrid_table_id).jqGrid('setGridParam',{url:'<?=base_url();?>index.php/admin/usuarios/todos/'+row_id}).trigger("reloadGrid") })
            }
            //Fin de subtabla



        });
        jQuery("#editgrid").jqGrid('navGrid',"#pager",{edit:true,add:true,del:true});
    });
</script>
